<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-20 20:43:42
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 19:59:57
-->
<template>
  <div>
    <el-select
      v-model="selected"
      popper-class="checkbox-select"
      multiple
      collapse-tags
      @change="changeHandler"
      value-key="value"
      size="small"
      placeholder="请选择"
      style="width:220px"
    >
      <el-option v-for="item in selfoptions" :key="item.value" :label="item.name" :value="item" :disabled="item.disabled">
        <span class="check"></span>
        <span style="margin-left: 8px">{{ item.name }}</span>
      </el-option>
      <div class="line"></div>
      <div class="operation"><el-checkbox v-model="isAll" @change="selectAll">全选</el-checkbox></div>
    </el-select>

    <!-- <el-divider>操作</el-divider>
    <div style="padding-bottom:250px"></div>
    <el-button type="primary" @click="setDisabled">设置4不可用</el-button>
    <el-button type="primary" @click="setEnabled">设置4可用</el-button>
    <el-button type="primary" @click="setUnChecked">设置3不选中</el-button>
    <el-button type="primary" @click="setChecked">设置3选中</el-button>
    <el-button type="primary" @click="selectAllCustom">全选</el-button> -->
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selfoptions: [
        {
          name: 'display 1',
          value: 'v1',
          disabled: false
        },
        {
          name: 'display 2',
          value: 'v2',
          disabled: false
        },
        {
          name: 'display 3',
          value: 'v3',
          disabled: true
        },
        {
          name: 'display 4',
          value: 'v5',
          disabled: false
        }
      ],
      selected: [],
      isAll: false
    };
  },
  mounted() {
    window.vm = this;
  },
  watch: {
    options: {
      handler: function(val) {
        this.selfoptions = val;
      },
      deep: true,
      immediate: true
    },
    selected: {
      handler: function(val) {
        this.updateAllCheckState(val, this.selfoptions);
        this.$emit('change', val);
      },
      immediate: true
    },
    selfoptions: {
      handler: function(val) {
        this.updateAllCheckState(this.selected, val);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    updateAllCheckState(_selecte, _selfoptions) {
      if(_selecte.length > 0) {
        if(_selecte.filter((k) => !k.disabled).length === _selfoptions.filter((k) => !k.disabled).length) {
          this.isAll = true;
        }else{
          this.isAll = false;
        }
      }else{
        this.isAll = false;
      }
    },
    changeHandler() {},
    selectAll(select) {
      if(select) {
        this.selected = this.selfoptions.slice(0).filter((k) => !k.disabled);
      }else{
        this.selected = this.selected.slice(0).filter((k) => k.disabled);
      }
    },
    setDisabled() {
      this.selfoptions[3].disabled = true;
    },
    setEnabled() {
      this.selfoptions[3].disabled = false;
    },
    setUnChecked() {
      var item = this.selfoptions[2];
      var idx = this.selected.indexOf(item);
      if(idx >= 0) {
        this.selected.splice(idx, 1);
      }
    },
    setChecked() {
      var item = this.selfoptions[2];
      if(!this.selected.find((k) => k.value === item.value)) {
        this.selected.push(item);
      }
    },
    selectAllCustom() {

      this.selected = this.selfoptions.slice(0);
    }
  }
};
</script>

<style>
.checkbox-select.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  content: '';
}
.checkbox-select.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check {
  background-color: #409eff;
  border-color: #409eff;
}
.checkbox-select.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check::after {
  transform: rotate(45deg) scaleY(1);
}
.checkbox-select.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.is-disabled .check {
  background-color: #c0c4cc;
  border-color: #c0c4cc;
}

.checkbox-select.el-select-dropdown.is-multiple .el-select-dropdown__item .check {
  display: inline-block;
  position: relative;
  top: 2px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: #fff;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.checkbox-select.el-select-dropdown.is-multiple .el-select-dropdown__item .check::after {
  box-sizing: content-box;
  content: '';
  border: 1px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
.checkbox-select.el-select-dropdown.is-multiple .line {
  width: 100%;
  height: 1px;
  background-color: #d9d9d9;
  margin: 5px 0px;
}
.checkbox-select.el-select-dropdown.is-multiple .operation {
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
}
</style>
